<style lang="less" scoped>
</style>
<template>
  <div :ref="chartId" @click="handleChartClick" style="heigth: 100%">111</div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'dashboard-pie',
  data () {
    return {}
  },
  props: {
    chartId: { type: String, required: true },
    chartTitle: { type: String, required: true },
    chartValue: { type: Number, required: true }
  },
  methods: {
    colorPicker (value) {
      if (value >= 80 && value <= 100) return '#6accc3'
      else if (value >= 60 && value < 80) return '#7fa2c1'
      else if (value >= 40 && value < 60) return '#f8c586'
      else return '#ea553c'
    },

    handleChartClick () {
      this.$emit('click')
    }
  },
  mounted () {
    let chartObj = echarts.init(this.$refs[this.chartId])
    chartObj.setOption({
      backgroundColor: '#FFF',
      color: this.colorPicker(this.chartValue),
      title: {
        text: this.chartTitle,
        // bottom: 5,
        x: 'center',
        y: 'bottom',
        textStyle: {
          fontSize: 12,
          color: '#a0a0a0'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params, ticket, callback) {
          var res = params.seriesName
          res += '<br/>' + params.name + ' : ' + params.percent + '%'
          return res
        }
      },

      series: [{
        name: '改革推进情况表',
        center: [
          '50.0%',
          '40%'
        ],
        radius: [
          '45%',
          '55%'
        ],
        type: 'pie',
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [{
          value: this.chartValue,
          name: '已提交',
          label: {
            normal: {
              formatter: '{d} %',
              position: 'center',
              show: true,
              textStyle: {
                fontSize: '16',
                fontWeight: 'bold',
                color: '#000'
              }
            }
          }
        }, {
          value: 100 - this.chartValue,
          name: '',
          tooltip: {
            show: false
          },
          itemStyle: {
            normal: {
              color: '#aaa'
            },
            emphasis: {
              color: '#aaa'
            }
          },
          hoverAnimation: false
        }]
      }]
    })
  }
}
</script>
